<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="applicable-device" content="mobile"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <!--<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">-->
    <meta name="format-detection" content="telephone=no"/>

    <link rel="stylesheet" href="css/all.css"/>
    <link rel="stylesheet" href="lib/skin/layer.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <script src="lib/flexible.js"></script>
    <script src="lib/swiper.min.js"></script>
    <script src="lib/jquery-1.9.1.min.js"></script>
    <script src="lib/jquery.cookie.js"></script>
    <script src="lib/layer.js"></script>
    <script src="js/hgNews.min.js"></script>
</head>
<body>
    <header class="header swiper-container-horizontal swiper-container-free-mode">
        <nav class="fl_cd swiper-wrapper" id="top-list">
            <a href="" class="current swiper-slide">首页</a>
            <a href="" class="swiper-slide">资讯</a>
            <a href="" class="swiper-slide">展会</a>
            <a href="" class="swiper-slide">访谈</a>
            <a href="" class="swiper-slide">专题</a>
            <a href="" class="swiper-slide">摄影</a>
            <a href="" class="swiper-slide">资讯</a>
            <a href="" class="swiper-slide">展会</a>
            <a href="" class="swiper-slide">访谈</a>
            <a href="" class="swiper-slide">专题</a>
            <a href="" class="swiper-slide">摄影</a>
            <a class="swiper-slide" id="stance"></a>
        </nav>
        <a class="add"><img src="img/213d_03.png" /></a>
    </header>
<!-- /header -->
<!-- bodyer -->
<div class="bodyer" id="news-list">
    <div class="dynamic con-show">
        <div class="content">
            <div class="name fl_cd">
                <img class="top-photo" src="img/tmp/fff23_10.png">
                <span class="my-name">摄影师华子</span>
            </div>
            <a href="" class="list list-1"><p>首度人生难得的不是选择，而是选择后的坚持而是选择后的坚持</p></a>
            <div class="comment">
                <span class="exclusive">专访</span>
                <img class="look" src="img/sdfsdf_03.png" alt="">
                <span class="span1">235</span>
                <img class="look" src="img/fff34_05.png" alt="">
                <span class="span1">235</span>
                <span class="span1 time">2016-06-02</span>
            </div>
        </div>
        <div class="content">
            <div class="name fl_cd">
                <img class="top-photo" src="img/tmp/fff23_10.png">
                <span class="my-name">摄影师华子</span>
            </div>
            <a href="" class="list list-2">
                <p>首度人生难得的不是选择，而是选择后的坚持而是选择后的坚持</p>
                <div class="img">
                    <img class="" src="img/tmp/fff23_14.png">
                    <img class="" src="img/tmp/fff23_14.png">
                    <img class="" src="img/tmp/fff23_14.png">
                </div>
            </a>
            <div class="comment">
                <span class="exclusive">专访</span>
                <img class="look" src="img/sdfsdf_03.png" alt="">
                <span class="span1">235</span>
                <img class="look" src="img/fff34_05.png" alt="">
                <span class="span1">235</span>
                <span class="span1 time">2016-06-02</span>
            </div>
        </div>
        <div class="content">
            <div class="name fl_cd">
                <img class="top-photo" src="img/tmp/fff23_10.png">
                <span class="my-name">摄影师华子</span>
            </div>
            <a href="" class="list fl_cd">
                <p class="word">首度人生难得的不是选择，而是选择后的坚持而是选择后的坚持</p>
                <div class="img1"><img class="" src="img/tmp/fff23_14.png"></div>
            </a>
            <div class="comment">
                <span class="exclusive">专访</span>
                <img class="look" src="img/sdfsdf_03.png" alt="">
                <span class="span1">235</span>
                <img class="look" src="img/fff34_05.png" alt="">
                <span class="span1">235</span>
                <span class="span1 time">2016-06-02</span>
            </div>
        </div>
        <div class="content">
            <div class="name fl_cd">
                <img class="top-photo" src="img/tmp/fff23_10.png">
                <span class="my-name">摄影师华子</span>
            </div>
            <a href="" class="list list-4">
                <p>首度人生难得的不是选择，而是选择后的坚持而是选择后的坚持</p>
                <div class="img">
                    <img class="" src="img/tmp/fff23_14.png">
                </div>
            </a>
            <div class="comment">
                <span class="exclusive">专访</span>
                <img class="look" src="img/sdfsdf_03.png" alt="">
                <span class="span1">235</span>
                <img class="look" src="img/fff34_05.png" alt="">
                <span class="span1">235</span>
                <span class="span1 time">2016-06-02</span>
            </div>
        </div>
    </div>
</div>
<!-- /bodyer -->
<!-- footer -->
<div class="footer-footer"></div>
<footer class="footer">
    <div class="bottom l-f">
        <a href="index.html" class="first l-f-g1 red">
            <img src="img/add23_03_02_05_03.png" alt="">
            <p>首页</p>
        </a>
        <a href="zhuanti_photo.html" class="photo l-f-g1">
            <img src="img/add23_03_02_05_08.png" alt="">
            <p>图库</p>
        </a>
        <a href="my_page_nont.html" class="my l-f-g1" id="my-id">
            <img src="img/add23_03_02_05_05.png" alt="">
            <p>我的</p>
        </a>
    </div>
</footer>
<!-- /footer -->
<div class="comment-page">
    <div id="channel">
        <div class="channel">
            <div class="cancel fl_cd">
                <img class="channel-hide" src="img/dewer333sw_03.png" alt="">
            </div>
            <div class="my-channel">
                我的频道
                <div class="redact">编辑</div>
            </div>
            <div class="my-channel-con channel-list fl_cd"></div>
            <div class="my-channel">
                频道推荐
            </div>
            <div class="my-channel-con channel-list2 fl_cd"></div>
        </div>
    </div>
</div>
<!--栏目列表滑动-->
<script>
    $(function(){
        var mySwiper1 = new Swiper('.header',{
            freeMode : true,
            slidesPerView : 'auto',
            observer: true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents: true//修改swiper的父元素时，自动初始化swiper
        });
    });
    $("#top-list").find("a").click(function(){
        $(this).addClass("current").siblings().removeClass("current");
    })
</script>
<!--频道弹窗-->
<script>
$.ajax({
    type:"post",
    url:hgNews.api.staticCategories,
    dataType:"json",
    error: function (jqXHR, textStatus, errorThrown) {//进行错误信息的处理
        /*弹出jqXHR对象的信息*/
        console.log(jqXHR.responseText + "-" + jqXHR.status + "-" + jqXHR.readyState + "-" + jqXHR.statusText);
        /*弹出其他两个参数的信息*/
        console.log(textStatus);
        console.log(errorThrown);
    },
    success:function(data){
        if (data.status == 1){
            for (var i = 0;i<data.data.length;i++){
                if (data.data[i].display == true){
                    var myChannel = '<div class="list"><div class="shade"><i class="delete"><img src="img/dewer333sw_07.png" alt=""></i> </div> <a class="channel-hide" id="'+data.data[i].catid+'">'+data.data[i].name+'</a> </div>';
                    $(".channel-list").append(myChannel);
                }else if (data.data[i].display == false){
                    var sChannel = '<div class="list"><div class="shade shade-block"><i class="delete delete-none"><img src="img/dewer333sw_07.png" alt=""></i> </div> <a id="'+data.data[i].catid+'">'+data.data[i].name+'</a> </div>';
                    $(".channel-list2").append(sChannel);
                }
            }
        }else {
            alert("data.status="+data.status);
        }
    }
});
///////////////////todo 改变data.data[i].display == false、true
var mag =0;
$(".my-channel .redact").on("click",function(){
    if (mag == 0){
        $(this).html("完成");
        $(".channel-list .shade").addClass("shade-block");
        mag = 1;
    }else if (mag == 1){
        $(this).html("编辑");
        $(".channel-list .shade").removeClass("shade-block");
        mag = 0;
    }
});
////////////我的
$(".channel-list").on("click",".list .shade",function(){
    $(this).each(function(){
        $(this).find(".delete").addClass("delete-none");
        var recommend = "<div class='list'>"+$(this).parent().html()+"</div>";
        $(".channel-list2").prepend(recommend);
        $(this).parent().remove();
    });
});
$(".channel-list").on("click",".list a",function(){
    var listId = $(this).attr("id");
    var number = $(this).parent().index();      //频道的序列号
    var left =-(number*98);
    if (left<-340){
        left = -340;
    }
    $("#top-list").find("#"+listId+"").addClass("current").siblings().removeClass("current");
    $("#top-list").css({"transform":"translate3d("+left+"px, 0px, 0px)"});
//    $("#news-list").empty();
//    ajax1(listId);
});
/////未添加频道
$(".channel-list2").on("click",".list .shade",function(){
    if (mag == 1){
        $(this).addClass("shade-block");
    }else if (mag == 0){
        $(this).removeClass("shade-block");
    }
    $(this).find(".delete").removeClass("delete-none");
    var my = "<div class='list'>"+$(this).parent().html()+"</div>";
    $(".channel-list").append(my);
    $(this).parent().remove();
});

hgNews.share({show:".add",hide:"#channel .channel-hide"});  //弹窗的功能
</script>
</body>
</html>
